<template>
    <el-container style="height: 100%; border: 1px solid #eee">
        <!--左边-->
        <el-aside width="200px" style="background-color: rgb(220,223,230)" v-show="showMenu">
            <div style="height: 60px;">
                <img src="../../assets/logo_index.png" style="width: 200px; height: 60px;" alt="">
            </div>
            <el-menu :default-openeds="['0']" router style="background-color: rgb(238, 241, 246)">
                <el-submenu v-for="(item,index) in routes" :index="index+''">
                    <template slot="title"><i class="el-icon-setting">{{item.name}}</i></template>
                    <el-menu-item :class="$route.path===item2.path?'is-active':''" v-for="(item2,index2) in item.children" :index="item2.path">{{item2.name}}</el-menu-item>
                </el-submenu>
            </el-menu>
        </el-aside>

        <!--右边-->
        <el-container>
            <!--头部-->
            <el-header style="text-align: right; font-size: 24px; display: flex;">
                <div style="width: 10%;">
                    <i :class="menuClass" @click="changeMenuShow" style="padding-right: 100%; color:#333333;"></i>
                </div>
                <div style="width: 90%;">
                    <el-dropdown @command="handleCommand">
                        <i class="el-icon-user-solid" style="margin-right: 15px">
                            <span style="padding-left: 10px">{{userName}}</span>
                        </i>
                        <el-dropdown-menu slot="dropdown" >
                            <el-dropdown-item command="person">个人中心</el-dropdown-item>
                            <el-dropdown-item command="changePwd">修改密码</el-dropdown-item>
                            <el-dropdown-item command="logout">注销</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-header>
            <!--主体-->
            <el-main>
                <router-view></router-view>
            </el-main>

        </el-container>

    </el-container>
</template>

<script>
    export default {
        name: "Index",
        data(){
            return{
                page: {
                    size: 10,
                    current: 1,
                    query: {
                        id: null,
                        path: null,
                        name: null,
                        parentId: null,
                        description: null
                    }
                },
                showMenu: true,
                menuClass: 'el-icon-s-fold',
                routes:[
                    {

                    }
                ],
                userName: '未登录'
            }
        },
        methods: {
            async getMenu() {
                let resp = await this.$http.post("/sysMenu/getTreeByUser");
                let data = resp.data;
                if (data.code === 200){
                    this.routes = data.rows;
                }else {
                    this.$message.error(data.info);
                }
            },
            changeMenuShow(){
                this.showMenu = !this.showMenu;
                this.menuClass = this.menuClass === "el-icon-s-fold"? "el-icon-s-unfold" : "el-icon-s-fold";
            },
            async handleCommand(command) {
                console.log(command);
                if (command === "logout") {
                    let resp = await this.$http.get("/system/logout");
                    let data = resp.data;
                    if (data.code === 200) {
                        window.sessionStorage.clear();
                        this.$message.success(data.info);
                        this.$router.push("/login");
                    } else {
                        this.$message.error(data.info);
                    }
                }
                if (command === "person"){
                    this.$router.push('/person');
                }
                if (command === "changePwd"){
                    this.$router.push('/changePwd');
                }
            }
        },
        created() {
            this.getMenu();
            const userName = sessionStorage.getItem("userName");
            if (userName===null){
                this.userName = "未登录";
            }else {
                this.userName = userName;
            }
        },
    }
</script>

<style scoped>
    .el-icon-setting{
        color: #409EFF;
    }
</style>
